<template>
  <div style="width: 600px;margin: 30px auto 0;">
    <el-form ref="form" :rules="rules" :model="form" label-width="160px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="公司名称" prop="groupName" style="margin-right:15px">
              <el-input v-model="form.groupName" placeholder="请输入公司名称" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="统一社会信用代码" prop="uniformSocialCreditCode" style="margin-right:15px">
              <el-input v-model="form.uniformSocialCreditCode" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="公司地址" prop="address" style="margin-right:15px">
              <el-input v-model="form.address" placeholder="请输入公司地址" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="400客服" prop="telephone" style="margin-right:15px">
              <el-input v-model="form.telephone" placeholder="请输入400客服电话" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="公司logo" prop="logoUrl" style="margin-right:15px">
              <el-upload
                v-model="form.logoUrl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.logoUrl" :src="form.logoUrl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="统一社会信用代码" prop="uniformSocialCreditCodeUrl" style="margin-right:15px">
              <el-upload
                v-model="form.uniformSocialCreditCodeUrl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleUniformSocialCreditCodeSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.uniformSocialCreditCodeUrl" :src="form.uniformSocialCreditCodeUrl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="合同章" prop="misUrl" style="margin-right:15px">
              <el-upload
                v-model="form.misUrl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleMisSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.misUrl" :src="form.misUrl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="登录logo" prop="loginLogoUrl" style="margin-right:15px">
              <el-upload
                v-model="form.loginLogoUrl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleLoginLogoSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.loginLogoUrl" :src="form.loginLogoUrl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
// import { isURL, isEmail, isCellphone } from '@/utils/validate4Form'
Vue.use(VXETable)
export default {
  name: 'SysSetting',
  components: {},
  data() {
    return {
      uploadUrl: this.BASE_API_URL + 'arpa-basic-api/fileUpload',
      form: {
        code: '',
        parentCode: '',
        level: '',
        groupName: '',
        groupNameLocal: '',
        identity: '',
        senderCode: '',
        password: '',
        resourceId: '',
        address: '',
        mobilePhone: '',
        wwwUrl: '',
        telephone: '',
        colorStyle: '',
        softVersion: '',
        misUrl: '',
        token: '',
        gdmapTraceSid: '',
        locationSource: '',
        logoUrl: '',
        balance: '',
        smsCount: '',
        oilPayType: '',
        eCode: '',
        shipperBond: '',
        shipperBondRate: '',
        isIgnoreDecimal: '',
        isLoginkTarget: '',
        isLoginkTargetEnvironment: '',
        allowMult: '',
        allowMultCount: '',
        needSecondUpload: '',
        cancelNeedConfirm: '',
        isShipperLoactionCharge: '',
        taxType: '',
        isArpa: '',
        loginLogoUrl: '',
        insuredPayer: '',
        uniformSocialCreditCode: '',
        uniformSocialCreditCodeUrl: '',
        initiatedContract: '',
        isAllowDriver: '',
        isIncludingTaxPrice: '',
        shipperContractTemplate: '',
        driverContractTemplate: '',
        alipayAccount: '',
        alipayPid: '',
        alipayAppId: '',
        alipayPrivateKey: '',
        alipayPublicKey: '',
        alipayAppid: '',
        alipayKey: '',
        webchat: '',
        webchatAppid: '',
        webchatSecret: '',
        organizationCode: ''
      },
      rules: {
        groupName: [
          { required: true, message: '请输入组织名称：机构/网点/入住企业', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入公司地址', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入400客服电话', trigger: 'blur' },
          { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
        ],
        uniformSocialCreditCode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        uniformSocialCreditCodeUrl: [
          { required: true, message: '请上传统一社会信用代码', trigger: 'blur' }
        ],
        misUrl: [
          { required: true, message: '请上传合同章', trigger: 'blur' }
        ],
        logoUrl: [
          { required: true, message: '请上传公司logo', trigger: 'blur' }
        ],
        loginLogoUrl: [
          { required: true, message: '请上传登录页logo', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const partyGroup = await this.getInfo()
    if (partyGroup) {
      this.form = partyGroup
    }
  },
  methods: {
    getInfo() {
      return request({url: `/arpa-basic-api/partyGroup/one`, method: 'get' }).then(response => {
        return response.data
      })
    },
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = this.form
          const rLoading = this.openLoading();
          if (data.code) {
            request({ url: '/arpa-basic-api/partyGroup', method: 'put', data }).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
            })
          } else {
            request({ url: '/arpa-basic-api/partyGroup', method: 'post', data }).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
            })
          }
        } else {
          return false
        }
      })
    },
    handleLogoSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'logoUrl', res.data)
    },
    handleUniformSocialCreditCodeSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'uniformSocialCreditCodeUrl', res.data)
    },
    handleMisSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'misUrl', res.data)
    },
    handleLoginLogoSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'loginLogoUrl', res.data)
    },
    // 上传验证
    beforeImgUpload(file) {
      const isJPG =
                    file.type === 'image/jpeg' ||
                    file.type === 'image/bmp' ||
                    file.type === 'image/png'
      const isLtnM = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG,BMP,PNG 格式!')
      }
      if (!isLtnM) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isJPG && isLtnM
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
